<template>
  <div class="lcds-root-container">
    <lc-rower>
      <el-link class="lc-link" type="primary"> 标签链接 </el-link>
    </lc-rower>
    <lc-rower>
      <el-button class="lc-button" type="primary"> 按钮 </el-button>
    </lc-rower>
    <lc-rower>
      <lc-svg-icon class="lc-svg-icon" icon-class="materials_svg"></lc-svg-icon>
    </lc-rower>
    <lc-rower>
      <el-progress
        ref="progressRef"
        class="lc-progress"
        :percentage="70"
      ></el-progress>
    </lc-rower>
    <lc-rower>
      <lc-pagination
        ref="pagerRef"
        :background="true"
        @current-change="handleCurrentPageChange"
        @size-change="handlePageSizeChange"
      ></lc-pagination>
    </lc-rower>
    <lc-rower>
      <lc-table-column-filter selectedKey="showFlag">
        <el-button class="lc-button" type="primary"> 更多显示列··· </el-button>
      </lc-table-column-filter>
    </lc-rower>
    <lc-divider label="分割线" offset="20px" paddingInline="10px"></lc-divider
    ><lc-rower>
      <el-image class="lc-image" :src="image">
        <template #error>
          <div class="image-slot">
            <el-icon><icon-picture></icon-picture></el-icon>
          </div>
        </template>
      </el-image>
    </lc-rower>
    <lc-rower>
      <el-tooltip content="提示内容">
        <el-link class="lc-link" type="primary"> 标签链接 </el-link>
      </el-tooltip>
    </lc-rower>
    <lc-rower>
      <el-calendar class="lc-calendar"></el-calendar>
    </lc-rower>
    <lc-rower>
      <lc-menu :fields-map="fieldsMap" :menu-list="menuList"> </lc-menu>
    </lc-rower>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";

import { Picture as IconPicture } from "@element-plus/icons-vue";
import { request } from "@/apis/request";
defineOptions({
  name: "Zs9527",
});

const progressRef = ref(null);
const pagerRef = ref(null);
const image = ref("");
const menuList = ref([]);
const fieldsMap = ref({});

const handleCurrentPageChange = (pageIndex) => {};
const handlePageSizeChange = (pageSize) => {};
function navMenuQueryMenus() {
  const queryData = {};
  try {
    const params = { url: "", method: "get" };

    request({
      ...params,
      params: {
        ...queryData,
      },
    })
      .then((res) => {
        const data = res.data || [];
        menuList.value = data;
      })
      .catch((error) => console.error(error.message))
      .finally(() => {});
  } catch (e) {
    console.error("! queryDetail error: ", e.message);
  }
}

onBeforeMount(() => {
  navMenuQueryMenus();
});
</script>
